// 主色调
$primary-color: #1A3A6F;    // 藏蓝色 - 主色
$secondary-color: #005BAA;  // 科技蓝 - 辅助色
$background-color: #F5F5F5; // 浅灰色 - 背景
$text-color: #333333;       // 深灰色 - 文字
$warning-color: #FF6B35;    // 橙色 - 警示
$danger-color: #D32F2F;     // 红色 - 危险
$success-color: #4CAF50;    // 绿色 - 成功
$highlight-color: #E1F5FE;  // 浅蓝 - 高亮
$accent-color: #C0C0C0;     // 金属银 - 点缀

// 背景色
$app-background: rgba(19, 32, 57, 0.9);
$card-background: rgba(19, 32, 57, 0.7);
$panel-background: rgba(26, 58, 111, 0.3);
$hover-background: rgba(0, 91, 170, 0.2);
$item-background: rgba(0, 91, 170, 0.1);

// 字体
$primary-font: "思源黑体", "Roboto", sans-serif;
$heading-size: 20px;
$subheading-size: 16px;
$text-size: 14px;
$small-text-size: 12px;
$value-size: 24px;

// 边框和圆角
$border-radius: 10px;
$small-radius: 6px;
$border-color: rgba(255, 255, 255, 0.1);

// 阴影
$card-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
$hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
$button-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
$text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

// 动画
$transition-speed: 0.3s;
$transition-effect: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// 间距
$spacing-small: 8px;
$spacing-medium: 15px;
$spacing-large: 20px;

// 全局混合器
@mixin card-style {
  background: $card-background;
  border-radius: $border-radius;
  border: none;
  box-shadow: $card-shadow;
  color: #fff;
  transition: all $transition-speed ease;
  position: relative;
  overflow: visible !important;
}

@mixin button-style {
  background-color: $primary-color;
  border: 1px solid $secondary-color;
  color: #fff;
  border-radius: $small-radius;
  transition: all $transition-speed ease;
  font-weight: 500;
  text-shadow: $text-shadow;
  box-shadow: $button-shadow;
  
  &:hover {
    background-color: $secondary-color;
    border-color: $primary-color;
    transform: translateY(-1px);
    box-shadow: $hover-shadow;
  }
  
  &:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
}

@mixin item-block {
  padding: $spacing-small;
  background: $item-background;
  border-radius: $small-radius;
  transition: all $transition-speed ease;
  
  &:hover {
    background: $hover-background;
  }
}

// 重要数值文本样式
@mixin value-text {
  font-size: $value-size;
  font-weight: bold;
  color: $highlight-color;
  text-shadow: $text-shadow;
}

// 标签文本样式
@mixin label-text {
  font-size: $small-text-size;
  color: rgba(255, 255, 255, 0.7);
} 